<template>
	<div style="display: inline-block;">
		<span class="fee-btn" @click="feeVisible=true">套餐说明</span>
		<el-dialog append-to-body top="20vh" :visible.sync="feeVisible" width="600px" center>
			<el-table class="fee-table" size="small" :data="feeData">
				<el-table-column property="merchant" label="运营商">
					<template slot-scope="scope">
						<p>{{scope.row.merchant==1?'电信':scope.row.merchant==2?'移动':'联通'}}：{{scope.row.type==1?'基础套餐':scope.row.type==2?'标准套餐':'高级套餐'}}</p>
						<p>【含{{scope.row.quantity}}条/月短信】</p>
					</template>
				</el-table-column>
				<el-table-column property="month1" label="1个月"></el-table-column>
				<el-table-column property="month12" label="12个月"></el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'FeeDetail',
		props: ['smstype'],
		data() {
			return {
				feeVisible: false,
				feeData: [],
			}
		},
		watch:{
			smstype:function(){
				this.queryFeeData()
			}
		},
		mounted() {
			this.queryFeeData()
		},
		methods: {
			queryFeeData() {
				this.$request.queryFee({
					smstype: this.smstype,
				}).then(res => {
					if(res.code == 0) {
						var list = res.list || []
						this.feeData = []
						for(var i = 0; i < 6; i++) {
							this.feeData.push({})
						}
						for(var i = 0; i < list.length; i++) {
							this.feeData[(list[i].type==1?0:1) * 3 + list[i].merchant - 1].type = list[i].type
							this.feeData[(list[i].type==1?0:1) * 3 + list[i].merchant - 1].merchant = list[i].merchant
							this.feeData[(list[i].type==1?0:1) * 3 + list[i].merchant - 1].quantity=list[i].quantity
							this.feeData[(list[i].type==1?0:1) * 3 + list[i].merchant - 1]['month' + list[i].month] = (list[i].price / 100) + '元/月'
							this.feeData[(list[i].type==1?0:1) * 3 + list[i].merchant - 1]['month12'] = (list[i].price / 100*12) + '元/年（每月'+list[i].price / 100+'元）'
						} 
					} else {
						this.msgError(res.msg)
					}
				})
			},
		}
	}
</script>

<style scoped="" lang="scss">
	.fee-btn {
		color: red;
		display: inline-block;
		font-weight: normal;
		line-height: inherit;
		font-size: 14px;
		text-decoration: underline;
		font-weight: bold;
		cursor: pointer;
	}
	>>>.el-dialog{
		&:after{
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 6px;
			background: linear-gradient(90deg,#0088EA,#90D1FF);
		}
		
	}
	>>>.fee-table {
		.el-table__header .has-gutter {
			background: linear-gradient(90deg, #0088EA,#90D1FF, );
			tr,
			th {
				height: 50px;
				background: transparent;
				border-bottom: none;
				color: #fff;
				font-size: 16px;
			}
		}
		td{
			&:first-child{
				font-weight: bold;
			}
		}
		th .cell,
		td .cell {
			text-align: center;
			line-height:18px;
		}
		td .cell{
			color: #333;
			font-size: 14px;
		}
		.el-table__body {
			tr:nth-child(even):nth-child(-n+6){
				background: rgba(0, 136, 234, .1);
			}
			tr:nth-child(odd):nth-child(-n+6){
				background: rgba(0, 136, 234, .2);
			}
			tr:nth-child(even):nth-child(-n+3){
				background: rgba(234, 83, 0, 0.1);
			}
			tr:nth-child(odd):nth-child(-n+3){
				background: rgba(234, 83, 0, 0.2);
			}
			td {
				border-bottom: none;
			}
			tr:hover td{
				background: transparent;
			}
		}
	}
</style>